/**
 * 学习目标：模拟项目，使用 useEffect 发送请求
 *   步骤：
     1. npm i axios
     2. 封装utils/requst.js
     3. 准备 api/channels.js
     4. 声明state list
     5. 使用 useEffect 触发请求
     6. 页面渲染
 */
import React, { useEffect, useState } from 'react';
import { getChannels } from './api/channels';

export default function App() {
  const [list, setList] = useState([]);
  // ctrl + i 唤起代码提醒

  // ✅✅✅正常发请求，定义一个 async 函数即可
  useEffect(() => {
    const loadData = async () => {
      const res = await getChannels();
      setList(res.data.channels);
    };
    loadData();
  }, []);

  // 错误示范，不要在 useEffect 直接发送请求
  // async / await 会把整段代码返回 promise
  // 这个时候 useEffect 返回了 promise
  // 卸载时， useEffect 返回了 函数
  // ❌❌❌useEffect没办法识别，所以不要在 useEffect 直接发请求
  // useEffect(async () => {
  //   const res = await getChannels();
  //   setList(res.data);
  // });
  return (
    <>
      {list.map((item) => {
        return <div key={item.id}>{item.name}</div>;
      })}
    </>
  );
}
